angular.module("hello").component("person", {
  bindings: { person: "<" },
  template: /* HTML */ `
    <h3>A person!</h3>
    <div>Name: {{$ctrl.person.name}}</div>
    <div>Id: {{$ctrl.person.id}}</div>
    <div>Company: {{$ctrl.person.company}}</div>
    <div>Email: {{$ctrl.person.email}}</div>
    <div>Address: {{$ctrl.person.address}}</div>
    <button ng-click="getScope()"> state </button>

    <button ui-sref="people">Close</button>
  `,
  controller: class Person{
    /**
     * @param {angular.IScope} $scope 
     * @param {import('@uirouter/core').StateParams} $stateParams 
     * @param {{
     *  getAllPeople(): Promise<any>;
     *  getPerson(id: any): Promise<any>;
     * }} $people 
     */
    constructor($scope, $stateParams, $people) {
      this.$stateParams = $stateParams;
      $scope.getScope = ()=> {
        return console.log($scope);
      }
      $scope.$on("$destroy", () => {
        console.log("Person destroyed");
      });
    }
    
  },
});
